<template>
  <div id="app">
    <h1 style="text-align: center">微信授权后接收通知</h1>
    <div>
      <button v-if="!code || code === ''" @click="init">授权</button>
      <button v-else>授权成功</button>
    </div>
  </div>
</template>

<script>

import { greet } from "@/api/base/wx";

// 微信授权登陆地址
const WX_AUTH_URL = 'https://open.weixin.qq.com/connect/oauth2/authorize?';
// 重定向参数-固定写法
const REDIRECT = '#wechat_redirect';
export default {
  data() {
    return {
      account: '',
      smsCode: '',
      params: {
        appid: 'wx50f08e61bf92454f', // 公众号 APP ID
        redirect_uri: `${encodeURI(`${window.location.origin}/#/wx-auth`)}`, // 授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理
        response_type: 'code', // 固定写法
        scope: 'snsapi_userinfo' // snsapi_base 静默授权获取 open id ；snsapi_userinfo 需要用户授权，获取详细信息
      },
      code: '', // 微信返回 code
    }
  },
  created() {
    // 获取地址参数
    const params = new URLSearchParams(location.search);
    this.code = params.get('code');
    if (this.code) {
      greet(this.code).then(res => {
        console.log(res)
      })
    }
  },
  methods: {
    init() {
      // 访问地址
      const access_url = WX_AUTH_URL + `${new URLSearchParams(this.params)}` + REDIRECT;
      // 这些需要判断没有 code 情况拉起授权登陆，有就结束放在重复拉起授权登陆
      if (!this.code) {
        location.href = access_url;
      }
    }
  }
}
</script>

<style scoped>
button {
  background-image: linear-gradient(219deg, #00A45A 0%, #03CE72 100%);
  color: #FFFFFF;
  width: 100%;
  height: 42px;
  box-shadow: 0 rpx 8 rpx 16 rpx 0 rpx rgba(0, 164, 90, 0.08);
  border-radius: 48px;
  font-size: 38 rpx;
  border: none;
}

input {
  height: 29px;
  width: 90%;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  padding: 2px 13px;
}
</style>
